<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 消息通知区域 -->
    <el-timeline>
      <el-timeline-item
        :timestamp="msg.timeStamp"
        placement="top"
        v-for="msg in this.$store.state.message"
        :key="msg.timeStamp"
      >
        <el-card>
          <el-row :gutter="20">
            <el-col :span="20"
              ><div class="grid-content bg-purple">
                <h4>{{msg.info}}</h4>
                <p>更新于 {{msg.timeStamp}}</p>
              </div></el-col
            >
            <el-col :span="4"
              ><div class="grid-content bg-purple">
                <el-button type="warning" round size="small">删除</el-button>
              </div></el-col
            >
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'NoteBox'
}
</script>

<style lang="less" scoped></style>
